<template>
  <div class="app-container">
    <el-card>
      <div slot="header" class="clearfix">
        <span>報損出库</span>
      </div>
      <el-form ref="form" :model="form" label-width="auto">
        <el-row>
          <el-col :span="8">
            <el-form-item label="出倉單編號: ">
              <div>{{ form.defaultNumber }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="仓库: ">
              <div>{{ form.depot.name }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出库类型: ">
              <div>{{ dict.label.outBillType[form.outType] }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="出库总数量:">
              <div>{{ form.sumQuantity }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="備註: ">
              <div>{{ form.remark }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="審核狀態:">
              <div>{{ form.audit | audit }}</div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="創建日期:">
              <div>{{ form.createdAt }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="出倉日期:">
              <div>{{ form.outTime }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="用戶:">
              <div>{{ form.operPersonName }}</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card>
      <div slot="header" class="clearfix">
        <span>出库商品明細</span>
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
        height="400px"
        stripe
      >

        <el-table-column
          label="出庫單編號"
          width="400px"
          prop="outInBillItems"
        />

        <el-table-column
          label="产品名"
          width="400px"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.product">{{ scope.row.product.nameCn }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="產品編號"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.product">{{ scope.row.product.sku }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="quantity"
          label="数量"
        />
        <el-table-column
          prop="remark"
          label="備註"
        />
      </el-table>
    </el-card>
  </div>
</template>

<script>
import depotApi from '@/api/wms/depot'
import Vue from 'vue'
import router from '@/router/routers'
import store from '@/store'
import { mapGetters } from 'vuex'
import { all } from '@/api/wms/depotBillOut'

export default {
  name: 'OutBillDetails',
  dicts: ['outBillType'],
  filters: {
    audit(val) {
      if (val) {
        return '已審核'
      } else {
        return '未審核'
      }
    }
  },
  props: {
    model: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      tableData: [],
      vendorOptions: [],
      newArr: [],
      arrId: [],
      list: [],
      loading: false,
      form: {
        sourceNo: '',
        sumQuantity: '',
        outType: '',
        id: '',
        outTime: '',
        depotName: '',
        depotBilloutItems: []
      },
      tempRoute: {},
      purchaseId: ''
    }
  },
  computed: {
    ...mapGetters(['baseApi'])
  },
  created() {
    this.echoFun()
  },
  mounted() {
    depotApi.getAll().then(res => {
      for (let i = 0; i < res.data.length; i++) {
        this.list.push({ label: res.data[i].name, value: res.data[i].id })
      }
    })
  },
  methods: {
    remoteMethod(query) {
      if (query !== '') {
        this.loading = true
        setTimeout(() => {
          this.loading = false
          this.vendorOptions = this.list.filter(item => {
            return item.label.toLowerCase()
              .indexOf(query.toLowerCase()) > -1
          })
        }, 200)
      } else {
        this.vendorOptions = []
      }
    },
    setTitle(title) {
      Vue.nextTick(() => {
        const routeTitle = Object.assign(Object.assign({}, router.currentRoute), { title })
        store.dispatch('tagsView/updateVisitedView', routeTitle)
        document.title = title
      })
    },
    echoFun() {
      this.purchaseId = this.$route.query.purchaseId
      all({ defaultNumber: this.defaultNumber }).then(res => {
        if (res.code === 0) {
          this.form = res.data[0]
          this.tableData = this.form.depotBillOutItems
          this.setTitle('出庫單編號' + this.form.defaultNumber)
        }
      })
    }
  }
}
</script>

<style>
.tableImg {
  width: 50px;
  margin-right: 6px;
  float: left;
}

.productInfo span {
  display: block;
  line-height: 16px;
}

.totalRow {
  text-align: right;
  color: gray;
}
</style>
